<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="修改">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name" label="接口描述">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="url" label="url">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="是否锁定" prop="available">
            <el-radio-group v-model="form.available">
              <el-radio :label="1">公开</el-radio>
              <el-radio :label="0">锁定</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="详细配置">
            <el-input type="textarea" v-model="form.perConfig"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">立即修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'

export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  data() {
    return {
      api: {
        update: this.$api.api.update,
        one: this.$api.api.one
      },
      rules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'blur' }
        ]
      },
      form: {
        name: null,
        available: 1,
        perConfig: '',
        url: null,
        code: null
      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    goBack() {
      this.$router.go(-1)
    },
    handleUpdate() {
      this.$httpTemplate({ url: this.api.update, paras: this.form }, e => {})
    },
    handleOne(code) {
      this.$httpTemplate({ url: this.api.one, paras: { code: code } }, data => {
        this.$beanUtils.copyProperties(data.data.data.one, this.form)
      })
    }
  },
  created() {
    const code = this.$route.query.code
    console.log(code)
    this.handleOne(code)
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;

  }

</style>
